<template>
  <div>
    <a-layout>
      <Header />
      <Content />
      <!-- <Footer /> -->
      <!-- 用户未登录时弹框 -->
      <div>
        <a-modal
          v-model:open="modalVisible"
          centered
          :footer="null"
          @cancel="cancel"
          width="300"
        >
          <div class="box">
            <!-- 顶部提示语 -->
            <div style="height: 28px; opacity: 0.6">
              <a-space :size="5">
                <ExclamationCircleOutlined
                  style="color: #ff860d; padding-left: 10px"
                />
                <p style="font-size: 11px; color: #ff860d; padding-top: 8px">
                  曲师商城不会以任何理由要求您转账，谨防诈骗
                </p>
              </a-space>
            </div>
            <!-- Form表单 -->
            <div class="navgation_top">
              <a-tabs tabBarStyle="color: black" v-model:activeKey="activeKey">
                <!-- 密码登录 -->
                <a-tab-pane key="1" tab="密码登录">
                  <div>
                    <a-form
                      ref="AccountFormRef"
                      :rules="AccountRules"
                      :model="user"
                    >
                      <a-form-item name="nickName">
                        <a-input
                          placeholder="昵称"
                          style="width: 100%"
                          v-model:value="user.nickName"
                          maxlength="10"
                          minlength="2"
                        >
                          <template #prefix>
                            <UserOutlined />
                          </template>
                        </a-input>
                      </a-form-item>
                      <a-form-item name="password">
                        <a-input-password
                          placeholder="密码"
                          style="width: 100%"
                          v-model:value="user.password"
                        >
                          <template #prefix>
                            <LockOutlined />
                          </template>
                        </a-input-password>
                      </a-form-item>
                      <a-form-item>
                        <a-button
                          style="
                            width: 100%;
                            background-color: #f56c6c;
                            color: white;
                            letter-spacing: 3px;
                            font-weight: bold;
                          "
                          @click="doLogin"
                          :disabled="isLogin"
                          >登录</a-button
                        >
                      </a-form-item>
                    </a-form>
                  </div>
                </a-tab-pane>
                <!-- 手机登录 -->
                <a-tab-pane key="2" tab="手机登录" force-render>
                  <div>
                    <a-form
                      ref="PhoneFormRef"
                      :rules="PhoneRules"
                      :model="phoneUser"
                    >
                      <a-form-item name="phone">
                        <a-input
                          addon-before="+86"
                          style="width: 100%"
                          v-model:value="phoneUser.phone"
                          maxlength="11"
                          minlength="11"
                        >
                        </a-input>
                      </a-form-item>
                      <a-form-item name="code">
                        <a-input-search
                          v-model:value="phoneUser.code"
                          placeholder="请输入验证码"
                          @search="onSearch"
                          style="width: 100%"
                          maxlength="6"
                          minlength="6"
                        >
                          <template #enterButton>
                            <a-button
                              @click="getCode"
                              :disabled="disabled"
                              style="
                                background-color: #409eff;
                                color: #fff;
                                font-size: 10px;
                              "
                              >{{ content }}</a-button
                            >
                          </template>
                        </a-input-search>
                      </a-form-item>
                      <a-form-item>
                        <a-button
                          style="
                            width: 100%;
                            background-color: #f56c6c;
                            color: white;
                            letter-spacing: 3px;
                            font-weight: bold;
                          "
                          @click="doPhoneLogin"
                          >登录</a-button
                        >
                      </a-form-item>
                    </a-form>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
            <!-- 微信或者qq登录 -->
            <!-- <div class="bottom_login">
              <a-row>
                <a-col :span="12" style="height: 50.8px; display: flex; justify-content: center;">
                  <a-space :size="20">
                    <div>
                      <QqOutlined :style="QQStyle" />
                      <router-link @click="toDoLogin" to="" style="font-size: 12px"
                        >QQ</router-link
                      >
                    </div>
                    <div>
                      <WechatOutlined :style="WeiXinStyle" />
                      <router-link @click="toDoLogin" to="" style="font-size: 11px">
                        微信
                      </router-link>
                    </div>
                  </a-space>
                </a-col>
                <a-col :span="12" style="height: 50.8px; display: flex; justify-content: center; margin-top: 8px;">
                  <router-link
                    to="/register"
                    style="
                      font-size: 11px;
                      margin-top: 10px;
                      padding-left: 40px;
                    "
                    >立即注册</router-link
                  >
                </a-col>
              </a-row>
            </div> -->
          </div>
        </a-modal>
      </div>
    </a-layout>
  </div>
</template>
<script setup>
import Content from "@/components/content/Content.vue";
import Header from "@/components/header/Header.vue";
// import Footer from "@/components/footer/Footer.vue";
import {
  QqOutlined,
  WechatOutlined,
  UserOutlined,
  LockOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { ref, onMounted } from "vue";
import { useAuthorizationStore } from "@/stores/authorization";
import { passwordLogin, phoneLogin } from "@/api/user.js";
import router from "@/router";
import { useUserStore } from "@/stores/user";
import { sendMs } from "@/api/sendMs";
const modalVisible = ref(false);
onMounted(() => {
  if (!authorizationStore.authorization) {
    //说明用户已登录，则不展示登录框
    modalVisible.value = true;
  }
});

function cancel() {
  modalVisible.value = false;
}
const activeKey = ref("1");
const user = ref({
  nickName: "",
  password: "",
});
const phoneUser = ref({
  phone: "",
  code: "",
});
const isLogin = ref(false);
//密码登录
const userStore = useUserStore();
const authorizationStore = useAuthorizationStore();
function doLogin() {
  AccountFormRef.value
    .validate()
    .then(() => {
      passwordLogin(user.value).then((res) => {
        if (res.code == 200 && res.data != null) {
          message.success("登录成功！");
          isLogin.value = true;
          userStore.setUser(res.data.user);
          authorizationStore.setAuthorization(res.data.authorization);
          modalVisible.value = false;
          router.push("/");
          window.location.reload();
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//手机号登录
function doPhoneLogin() {
  PhoneFormRef.value
    .validate()
    .then(() => {
      phoneLogin(phoneUser.value).then((res) => {
        if (res.code == 200 && res.data != null) {
          message.success("登录成功！");
          isLogin.value = true;
          userStore.setUser(res.data.user);
          authorizationStore.setAuthorization(res.data.authorization);
          modalVisible.value = false;
          router.push("/");
          window.location.reload();
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//数据校验
const PhoneFormRef = ref();
const AccountFormRef = ref();
const AccountRules = {
  nickName: [
    {
      required: true,
      message: "请输入昵称",
      trigger: "change",
    },
    {
      min: 2,
      max: 10,
      message: "长度为2~10个字符",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};
const PhoneRules = {
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "change",
    },
    {
      min: 11,
      max: 11,
      message: "长度为11个字符",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
};

//获取验证码前确认是否是真实手机号
const disabled = ref(false);
const content = ref("获取验证码");
function getCode() {
  //请求发送短信
  if (phoneUser.value.phone !== "") {
    sendMs(phoneUser.value.phone).then((res) => {
      if (res.code === 200) {
        message.success("发送成功!");
      }
    });
    var time = 180;
    //禁用获取验证码按钮
    disabled.value = true;
    // 开启定时器
    var timer = setInterval(function () {
      // 判断剩余秒数
      if (time == 0) {
        // 清除定时器和复原按钮
        clearInterval(timer);
        disabled.value = false;
        content.value = "获取验证码";
      } else {
        content.value = `${time}秒后重新获取`;
        time--;
      }
    }, 1000);
  } else {
    message.error("请输入手机号");
  }
}

function toDoLogin() {
  message.success("暂未开放~")
}

//样式绑定
const QQStyle = {
  color: "#409EFF",
  fontSize: "20px",
};
const WeiXinStyle = {
  color: "#67C23A",
  fontSize: "20px",
};
</script>

<style scoped>
a:hover {
  color: red;
}
.box {
  width: 300px;
  height: 300px;
  background-color: #fff;
  padding: 0 10px 0 10px;
  border-radius: 10px;
  opacity: 1;
}

.navgation_top {
  color: black;
  padding: 12px 16px;
  height: 258px;
}

.bottom_login {
  color: black;
  height: 50.8px;
  opacity: 0.7;
}
</style>